<script setup lang="ts">
import {useRouter} from "vue-router";
import {ref} from "vue";
import {showFailToast, showSuccessToast, showToast} from "vant";
import myAxios from "../plugins/myAxios.ts";

const router = useRouter()
const initFormData = {
  "name": "",
  "description": "",
  "maxNum": 0,
  "expireTime": null,
  "userId": 0,
  "status": 0,
  "password": ""
}
// 用户填写的表单数据
const createTeamData = ref({...initFormData})
const showPicker = ref(false);
const minDate = new Date();

const expireTime = ref();
const currentDate = ref();
const currentTime = ref();

const onConfirm = () => {
  createTeamData.value.expireTime = new Date(...currentDate.value, ...currentTime.value);
  expireTime.value = `${currentDate.value.join('-')} ${currentTime.value.join(':')}`
  showToast(expireTime.value)
  showPicker.value = false;
};

const onCancel = () => {
  showPicker.value = false;
};
const onSubmit = async () => {
  const res = await myAxios.post('/team', {
    ...createTeamData.value,
    status: Number(createTeamData.value.status)
  })
  console.log(res, '队伍创建');
  if (res.code === 200 && res.data) {
    showSuccessToast('队伍创建成功');
    await router.replace('/team')
  } else {
    showFailToast(res.description);
  }
};
</script>

<template>
  <div id="teamCreateView">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
            v-model="createTeamData.name"
            name="name"
            label="队伍名称"
            placeholder="请输入队伍名称"
            :rules="[{ required: true, message: '请填写队伍名称' }]"
        />
        <van-field
            v-model="createTeamData.description"
            type="textarea"
            name="description"
            label="描述"
            placeholder="请输入队伍描述"
            :rules="[{ required: true, message: '请输入队伍描述' }]"
        />
        <van-field
            v-model="expireTime"
            is-link
            readonly
            name="datePicker"
            label="过期时间"
            placeholder="点击选择时间"
            @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" position="bottom">
          <van-picker-group
              title="过期时间"
              :tabs="['选择日期', '选择时间']"
              next-step-text="下一步"
              @confirm="onConfirm"
              @cancel="onCancel"
          >
            <van-date-picker
                v-model="currentDate"
                :min-date="minDate"
            />
            <van-time-picker v-model="currentTime"/>
          </van-picker-group>
        </van-popup>
        <van-field name="stepper" label="最大人数">
          <template #input>
            <van-stepper v-model="createTeamData.maxNum" max="10" min="3"/>
          </template>
        </van-field>

        <van-field name="radio" label="队伍状态">
          <template #input>
            <van-radio-group v-model="createTeamData.status" direction="horizontal">
              <van-radio name="0">公开</van-radio>
              <van-radio name="1">私有</van-radio>
              <van-radio name="2">加密</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <van-field
            v-if="createTeamData.status === '2'"
            v-model="createTeamData.password"
            type="password"
            name="password"
            label="密码"
            placeholder="请输入队伍密码"
            :rules="[{ required: true, message: '请输入队伍密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          创建队伍
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<style scoped>

</style>
